<template>
  <div class="alter-detail-container-padding">
    <!-- tabs start -->
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="项目内容" name="first">
        <DetailContent :detail-data="detailData" />
      </el-tab-pane>
      <el-tab-pane label="相关审核" name="second">
        <AuditList
          v-if="activeName == 'second'"
          :business-id="detailData.applyRespVO?.id"
          template-group="项目变更"
          :business-type="9"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- tabs end -->
  </div>
</template>

<script setup>
  import { changeAppleyGet } from '@/api/project/course/alter'
  import DetailContent from './components/detailContent.vue'
  import AuditList from '@/components/auditList.vue'

  const route = useRoute()

  const activeName = ref('first')
  const detailData = ref({})

  const getDetail = () => {
    changeAppleyGet({ id: route.query.id, getType: 2 }).then((res) => {
      if (res.code == 0 || res.code == 200) {
        detailData.value = res.data || {}
      }
    })
  }

  getDetail()
</script>

<style lang="scss" scoped></style>
